<template>
	<view>
		<view class="form column">
			<image class="form-cover" src="../../static/cover.png" mode=""></image>
			<view class="form-item row">
				<text class="form-item-label">图书名称：</text>
				<input v-model="form.bookname" class="form-item-input" type="text" placeholder="请输入图书名称"/>
			</view>
			<view class="form-item row">
				<text class="form-item-label">图书作者：</text>
				<input v-model="form.author" class="form-item-input" type="text" placeholder="请输入图书作者"/>
			</view>
			<view class="form-item row">
				<text class="form-item-label">图书出版社：</text>
				<input v-model="form.publisher" class="form-item-input" type="text" placeholder="请输入图书出版社"/>
			</view>
			<view class="form-item row">
				<text class="form-item-label">图书创建者：</text>
				<input v-model="form.creator" class="form-item-input" type="text" placeholder="请输入图书创建者"/>
			</view>
		</view>
		<button @click="onSubmit()" type="primary">新增图书</button>
	</view>
</template>

<script setup>
	import {reactive} from 'vue'
	const form = reactive({
		bookname:'',
		author:'',
		publisher:'',
		creator:''
	})
	const onSubmit = async ()=>{
		const res = await uni.request({
			method:'POST',
			url:'https://hmajax.itheima.net/api/books',
			data:form
		})
		uni.showToast({title:res.data.message})
		setTimeout(()=>{
			uni.navigateBack()
		},2000)
	}
</script>

<style lang="scss">
	.form{
		align-items: center;
		.form-cover{
			width: 200rpx;
			height: 200rpx;
		}
		.form-item-label{
			font-size: 30rpx;
			width: 200rpx;
			text-align: right;
		}
		.form-item-input{
			font-size: 30rpx;
			border-bottom: 1rpx solid #ddd;
		}
	}
</style>
